	<template>
		<view>
			<u-navbar title="主题旅游" @rightClick="rightClick" :autoBack="true" left-icon-size="40rpx" height="80rpx"
				titleStyle="font-size:40rpx">
			</u-navbar>

			<view class="list-page">
				<!-- <scroll-view scroll-y @scrolltolower="loadMore"> -->
				<mescroll-body @init="mescrollInit" @down="downCallback" @up="upCallback" :up="{ 
					page: { size: 6 }, // 初始分页大小
					textNoMore: '-- 没有更多内容 --' 
				}">
					<view class="search">
						<u-search placeholder="搜索目的地/景点" search-icon-size="40" disabled border-color="#E4E4E4"
							:show-action="false" bgColor="white" height="60" margin="20px"></u-search>
					</view>
					<list-card v-for="item in contentList" :key="item.id" :item="item"></list-card>
					<view class="loading">
						<!-- 传个布尔值进去 -->
						<!-- <loading :loading="loading" /> -->
					</view>
				</mescroll-body>
				<!-- </scroll-view> -->
			</view>
			
		</view>
	</template>

	<script>
		import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
		import {
			apiGoods
		} from "@/api/mock.js"
		export default {
			mixins: [MescrollMixin], // 使用mixin
			data() {
				return {
					contentList: [],
					loading: true,
				}
			},

			methods: {
				loadMore() {
					setTimeout(() => {
						this.loading = false
					}, 1500) // 1.5秒延迟模拟网络请求

				},

				upCallback(page) {
					const pageSize = 6
					apiGoods(page.num, pageSize).then(res => {

						// this.mescroll.endSuccess(res.list.length);
						this.mescroll.endBySize(res.list.length, res.totalCount);

						//设置列表数据
						if (page.num == 1) this.contentList = []; //如果是第一页需手动制空列表
						this.contentList = this.contentList.concat(res.list); //追加新数据
					}).catch(() => {
						//联网失败, 结束加载
						this.mescroll.endErr();
					})
				}
			}
		}
	</script>

	<style>
		.list-page {
			margin-top: calc(var(--status-bar-height) + 80rpx);
			background-color: #FFFFFF;

		}

		.search {
			padding-top: 5rpx;
		}

		::v-deep .u-search__content {
			border-width: 4rpx !important;
		}

		.main-card {
			height: 15vh;
			background-color: white;
			margin: 20rpx;
			border-radius: 20rpx;
		}

		.title {
			font-size: 30rpx;
		}

		.grade {
			background-color: #F2F2F2;
			color: #666666;
			width: 50rpx;
			height: 35rpx;
			border-radius: 10rpx;
			text-align: center;
			font-size: 20rpx;
			line-height: 35rpx;
		}

		.description-population {
			font-size: 20rpx;
			color: #A6A6A6;
		}

		.tags {
			display: flex;
			gap: 10rpx;
		}

		.price {
			margin-left: 130rpx;
			color: red;
		}

		.loading {
			height: 30rpx;
		}
	</style>